<template>
	<view class="pageView">
		<view class="pageTop">
			<view class="pageTop-title">{{ pageTitle }}报名</view>
			<view class="pageTop-content">我们将根据您填写的内容审核真伪</view>
		</view>
		<view class="pageBottom-top"></view>
		<view class="pageBottom-bottom">
			<u-form label-position="top" :model="form" :rules="rules">
				<u-form-item border-bottom>
					<template slot="label" prop="nickname">
						<view class="labelBlock">
							<view class="line"></view>
							<view class="labelName">姓名</view>
						</view>
					</template>
					<u-input v-model="form.nickname" placeholder="请输入姓名" border="false" :fontSize="18" color="#333"/>
				</u-form-item>
				<u-form-item border-bottom>
					<template slot="label" prop="sexName">
						<view class="labelBlock">
							<view class="line"></view>
							<view class="labelName">性别</view>
						</view>
					</template>
					<view style="display: flex;align-items: center;justify-content: space-between;" @click="handleSexShow">
						<view class="labelVal" v-if="form.sexName=='请选择性别'">{{ form.sexName }}</view>
						<view v-else @click="handleSexShow" class="labelVal1">{{ form.sexName }}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<u-form-item border-bottom>
					<template slot="label" prop="idcard_number">
						<view class="labelBlock">
							<view class="line"></view>
							<view class="labelName">身份证</view>
						</view>
					</template>
					<u-input v-model="form.idcard_number" placeholder="请输入身份证" border="false" :fontSize="18" color="#333"/>
				</u-form-item>
				<u-form-item border-bottom>
					<template slot="label" prop="mobile">
						<view class="labelBlock">
							<view class="line"></view>
							<view class="labelName">手机号</view>
						</view>
					</template>
					<u-input v-model="form.mobile" placeholder="请输入手机号" border="false" :fontSize="18" color="#333"/>
				</u-form-item>
				<u-form-item border-bottom>
					<template slot="label" prop="company">
						<view class="labelBlock">
							<view class="line"></view>
							<view class="labelName">单位</view>
						</view>
					</template>
					<u-input v-model="form.company" placeholder="请输入单位" border="false" :fontSize="18" color="#333"/>
				</u-form-item>
				<u-form-item border-bottom>
					<template slot="label" prop="cityName">
						<view class="labelBlock">
							<view class="line"></view>
							<view class="labelName">城市</view>
						</view>
					</template>
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view class="labelVal" v-if="form.cityName=='请选择城市'" @click="sexShow=true">{{ form.cityName }}</view>
						<view v-else  class="labelVal1">{{ form.sex }}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<u-form-item border-bottom>
					<template slot="label" prop="hospitalName">
						<view class="labelBlock">
							<view class="line"></view>
							<view class="labelName">入驻医院</view>
						</view>
					</template>
					<view style="display: flex;align-items: center;justify-content: space-between;" @click="handleHospitalName">
						<view class="labelVal" v-if="form.hospitalName=='请选择入驻医院'">{{ form.hospitalName }}</view>
						<view v-else class="labelVal1">{{ form.hospitalName }}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<u-form-item border-bottom>
					<template slot="label">
						<view class="labelBlock">
							<view class="line"></view>
							<view class="labelName">身份证</view>
						</view>
					</template>
					<view class="uploadBlock">
						<img :src="ImgUrl + 'images/avater.png'" alt="" style="width: 260rpx;height: 176rpx;">
						<img :src="ImgUrl + 'images/country.png'" alt="" style="width: 260rpx;height: 176rpx;">
					</view>
					<view class="uploadWarning">支持png、jpg格式图片</view>
				</u-form-item>
				<u-form-item border-bottom>
					<template slot="label">
						<view class="labelBlock">
							<view class="line"></view>
							<view class="labelName">体检报告</view>
						</view>
					</template>
					<view class="uploadBlock1">
						<img :src="ImgUrl + 'images/upload.png'" alt="" style="width: 260rpx;height: 176rpx;">
					</view>
					<view class="uploadWarning">支持png、jpg格式图片</view>
				</u-form-item>
				<u-form-item border-bottom>
					<template slot="label">
						<view class="labelBlock">
							<view class="line"></view>
							<view class="labelName">付款凭证上传</view>
						</view>
					</template>
					<view class="uploadBlock1">
						<img :src="ImgUrl + 'images/upload.png'" alt="" style="width: 260rpx;height: 176rpx;">
					</view>
					<view class="uploadWarning">支持png、jpg格式图片</view>
				</u-form-item>
			</u-form>
			<u-picker
			  mode="selector"
				range="selector"
				:show="sexShow"
				:columns="columns"
				@confirm="handleConfirm"
				@cancel="handleCancel"
				keyName="label"
				ref="pickerL"
			></u-picker>
		</view>
		<view class="pageBottom">
			<u-checkbox-group v-model="checked">
				<view class="pageBottom-checkBlock">
					<u-checkbox shape="circle" :size="14"></u-checkbox>
					<text class="textBlock">我已阅读并同意<text class="textBlock-text" @click="handleAgreementPage">《入驻协议》</text></text>
				</view>
			</u-checkbox-group>
			<button class="pageBottom-btn">提交</button>
		</view>
	</view>
</template>

<script>
	import { peopleApply, getHospitalList } from '@/api/common.js'
	export default {
		data() {
			return {
				checked: false,
				pageTitle: '',
				ImgUrl: this.$ImgUrl,
				form: {
					nickname: '',
					sex: '',
					sexName: '请选择性别',
					idcard_number: '',
					mobile: '',
					company: '',
					city: '',
					cityName: '请选择城市',
					hospital_id: '',
					hospitalName: '请选择入驻医院',
					idcard_front: '',
					idcard_backend: '',
					medical_report: '',
					pay_image: '',
					channel: ''
				},
				columns: [
					[
						{
							value: '0',
							label: '女'
						},
						{
							value: '1',
							label: '男'
						},
						{
							value: '2',
							label: '未知'
						}
					]
				],
				sexShow: false,
				rules: {
					'form.nickName': {
						required: true,
						message: '请输入姓名',
						// blur和change事件触发检验
						trigger: ['blur', 'change']
					},
					'form.sexName': {
						required: true,
						message: '请选择性别',
						// blur和change事件触发检验
						trigger: ['blur', 'change']
					},
					'form.idcard_number': [
						{
							required: true,
							message: '请输入身份证',
							// blur和change事件触发检验
							trigger: ['blur', 'change']
						},
						{
							pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
							message: '身份证输入有误'
						}
					],
					'form.mobile': [
						{
							required: true,
							message: '请输入手机号',
							// blur和change事件触发检验
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur']
						}
					],
					'form.company': {
						required: true,
						message: '请输入单位',
						// blur和change事件触发检验
						trigger: ['blur', 'change']
					},
					'form.cityName': {
						required: true,
						message: '请选择城市',
						// blur和change事件触发检验
						trigger: ['blur', 'change']
					},
					'form.hospitalName': {
						required: true,
						message: '请选择入驻医院',
						// blur和change事件触发检验
						trigger: ['blur', 'change']
					}
					
				}
			}
		},
		onShow() {
			this.pageTitle = uni.getStorageSync('itemData').title
			this.channel = uni.getStorageSync('itemData').channel
			this.form.hospitalName = uni.getStorageSync('hospitalData').name
			this.form.hospital_id = uni.getStorageSync('hospitalData').hosId
		},
		methods: {
			handleSexShow() {
				this.columns = []
				this.columns = [
					[
						{
							value: '0',
							label: '女'
						},
						{
							value: '1',
							label: '男'
						},
						{
							value: '2',
							label: '未知'
						}
					]
				]
				this.sexShow = true
			},
			handleConfirm(e) {
				this.form.sexName = e.value[0].label
				this.form.sex = e.value[0].value
				this.sexShow = false
			},
			handleHospitalName() {
				uni.navigateTo({
					url: '/pages/hospitalList/hospitalList'
				})
			},
			handleClick() {
				this.sexShow = true
			},
			handleCancel() {
				this.sexShow = false
			},
			handleAgreementPage() {
				uni.navigateTo({
					url: '/pages/agreementPage/agreementPage'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		position: absolute;
		background: #F4F4F4;
		height: 170%;
		.pageTop{
			position: relative;
			width: 750rpx;
			height: 266rpx;
			background: linear-gradient( 4deg, #7AA7EB 0%, #0165FB 100%);
			border-bottom-right-radius: 35%;
			border-bottom-left-radius: 35%;
			&-title{
				padding-top: 42rpx;
				padding-left: 52rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 44rpx;
				color: #FFFFFF;
				line-height: 52rpx;
			}
			&-content{
				padding-top: 12rpx;
				padding-left: 52rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: rgba(255,255,255,0.6);
				line-height: 33rpx;
			}
		}
		.pageBottom-top{
			position: absolute;
			top: 176rpx;
			left: 74rpx;
			width: 602rpx;
			height: 24rpx;
			background: #D0E5FD;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
		.pageBottom-bottom{
			position: absolute;
			top: 195rpx;
			left: 32rpx;
			width: 606rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 40rpx;
		}
		.labelBlock{
			display: flex;
			align-items: center;
			.line{
				width: 0rpx;
				height: 20rpx;
				border: 4rpx solid #0165FB;
			}
			.labelName{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 36rpx;
				color: #333333;
				padding-left: 16rpx;
			}
		}
		/deep/ .input-placeholder{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 36rpx;
			color: #CCCCCC;
		}
		.labelVal{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 36rpx;
			color: #CCCCCC;
			padding: 6px 9px;
		}
		.labelVal1{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 36rpx;
			color: #333;
			padding: 6px 9px;
		}
		.uploadBlock{
			padding-top: 28rpx;
			display: flex;
			justify-content: space-between;
		}
		.uploadBlock1{
			padding-top: 28rpx;
		}
		.uploadWarning{
			padding-top: 20rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-size: 20rpx;
			color: #999999;
			line-height: 23rpx;
		}
		.pageBottom{
			position: absolute;
			width: 686rpx;
			padding: 32rpx;
			top: 2350rpx;
			background: #fff;
			&-checkBlock{
				display: flex;
				align-items: center;
				.textBlock{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 22rpx;
					color: #666666;
					line-height: 26rpx;
					&-text{
						color: #E5432E;
					}
				}
			}
			&-btn{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 28rpx;
				width: 686rpx;
				height: 78rpx;
				background: #0165FB;
				border-radius: 68rpx 68rpx 68rpx 68rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
